<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=9; IE=8; IE=7; IE=EDGE">
    <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7"/>
    <title>个人注册</title>
    <link rel="stylesheet" type="text/css" href="../static/css/all.css"/>
    <link rel="stylesheet" type="text/css" href="../static/css/main.css"/>
    <script type="text/javascript" src="../static/js/all.js"></script>
    <script type="text/javascript" src="../static/js/register.js"></script>
</head>

<body>
<div class="register py-container ">
    <!--head-->
    <div class="logoArea">
        <a href="" class="logo3"></a>
    </div>
    <!--register-->
    <div class="registerArea">
        <h3>注册新用户<span class="go">我有账号，去<a href="login.html" target="_blank">登陆</a></span></h3>
        <div class="info">
            <form action="/register" method="post" id="reg_form" class="sui-form form-horizontal">
                <div class="control-group">
                    <label class="control-label">手机号：</label>
                    <div class="controls">
                        <input type="text" id="phone" name="phone" placeholder="请输入你的手机号"
                               class="input-xfat input-xlarge">
                        <span class="error"></span>
                    </div>
                </div>
                <div class="control-group">
                    <label for="inputPassword" class="control-label">验证码：</label>
                    <div class="controls">
                        <input type="text" id="code" name="code" placeholder="验证码" class="input-xfat input-xlarge"
                               style="width:120px">
                        <button type="button" class="btn-xlarge" id="dyMobileButton">发送验证码</button>
                        <span class="error"></span>
                    </div>
                </div>
                <div class="control-group">
                    <label for="inputPassword" class="control-label">登录密码：</label>
                    <div class="controls">
                        <input type="password" id="password" name="password" placeholder="设置登录密码"
                               class="input-xfat input-xlarge">
                        <span class="error"></span>
                    </div>
                </div>
                <div class="control-group">
                    <label for="inputPassword" class="control-label">确认密码：</label>
                    <div class="controls">
                        <input type="password" id="repassword" name="repassword" placeholder="再次确认密码"
                               class="input-xfat input-xlarge">
                        <span class="error"></span>
                    </div>
                </div>
                <div class="control-group">
                    <label for="inputPassword" class="control-label">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</label>
                    <div class="controls">
                        <input name="m1" type="checkbox" value="2" checked=""><span>同意协议并注册《品优购用户协议》</span>
                    </div>
                </div>
                <div class="control-group">
                    <label class="control-label"></label>
                    <div class="controls btn-reg">
                        <input type="submit" value="完成注册" class="sui-btn btn-block btn-xlarge btn-danger reg-btn">
                    </div>
                </div>
            </form>
            <div class="clearfix"></div>
        </div>
    </div>
    <!--foot-->
    <div class="py-container copyright">
        <ul>
            <li>关于我们</li>
            <li>联系我们</li>
            <li>联系客服</li>
            <li>商家入驻</li>
            <li>营销中心</li>
            <li>手机品优购</li>
            <li>销售联盟</li>
            <li>品优购社区</li>
        </ul>
        <div class="address">地址：北京市昌平区建材城西路金燕龙办公楼一层 邮编：100096 电话：400-618-4000 传真：010-82935100</div>
        <div class="beian">京ICP备08001421号京公网安备110108007702
        </div>
    </div>
</div>
<script type="text/javascript">
    //页面加载事件
    $(function () {
        var vcode = ""
        $('#dyMobileButton').click(function () {
            //获取手机输入框的值
            var phone = $('#phone').val();
            var pattern_phone = /^1[3-9][0-9]{9}$/;
            if (phone == '') {
                $('#phone').next().html('手机号码不能为空');
                return;
            } else if (!pattern_phone.test(phone)) {
                $('#phone').next().html('手机号码不合法');
                return;
            } else {
                $('#phone').next().html('');
            }
            var time = 7;
            $('#dyMobileButton').html('重新发送' + time + 's');
            $('#dyMobileButton').attr('disabled', true);   //设置按钮点击后不可以继续点击
            var fn = function () {
                time--;
                if (time > 0) {
                    $('#dyMobileButton').html('重新发送' + time + 's');
                } else {
                    clearInterval(interval);
                    $('#dyMobileButton').html('发送验证码');
                    $('#dyMobileButton').attr('disabled', false);
                }
            };
            fn();
            var interval = setInterval(fn, 1000); //定义重复计时器，每1秒执行一次
            //通过ajax发送post请求，获取验证码
            //参数：url,传送的参数-params,回调函数
            param = {"phone": phone} //定义json格式的参数
            $.post("/sendMsg", param, function (data) { //也可以用.ajax和.get
                if (data.errno != 5) {
                    alert(data.errmsg)
                } else {
                    vcode = data.code
                    alert("数据传输成功！")
                }
            });
        });
        // 验证码输入的验证吗是否正确
        $("#code").blur(function () {
            code = $(this).val()
            if (code!=vcode){
                $("#dyMobileButton").next().html("验证码错误，请重新输入！")
            }else {
                $("#dyMobileButton").next().html("")
            }
        });
    });

</script>
</body>

</html>